<template>
  <div :class="['work-in-process-root', state.wipData.isSelf ? 'isSelf' : '']">
    <el-tooltip
      v-if="state.hasToTop"
      content="向前追溯"
      effect="dark"
      placement="top"
    >
      <div class="work-in-process-top" @click="toTop">
        <el-icon><Top /></el-icon>
      </div>
    </el-tooltip>
    <div class="work-in-process-title">
      【 {{ state.wipData.invcode }} 】{{ state.wipData.invname }}
      <el-tag v-if="!state.wipData.isSelf" type="info">在制品</el-tag>
    </div>
    <div class="work-in-process-content-root">
      <div class="work-in-process-content">
        <div class="work-in-process-item" style="justify-content: flex-start">
          物料类型:
          <div style="width: 6px"></div>
          <span class="item-span">{{ state.wipData.invtype }}</span>
        </div>
        <div class="work-in-process-item" style="justify-content: flex-start">
          物料型号:
          <div style="width: 6px"></div>
          <span class="item-span">{{ state.wipData.invspec }}</span>
        </div>
        <div class="work-in-process-item-root">
          <div class="work-in-process-item" style="flex: 2">
            物料批次:
            <span class="item-span">{{ state.wipData.invbatch }}</span>
          </div>
          <div class="line-space"></div>
          <div class="work-in-process-item" style="flex: 3">
            机器:
            <span class="item-span">{{ state.wipData.equipName }}</span>
          </div>
        </div>
        <div class="work-in-process-item-root">
          <div class="work-in-process-item" style="flex: 2">
            领用数量:
            <span class="item-span">{{ state.wipData.qty }}</span>
          </div>
          <div class="line-space"></div>
          <div class="work-in-process-item" style="flex: 3">
            报工数量:
            <span class="item-span">{{ state.wipData.reportQty }}</span>
          </div>
        </div>
        <div class="work-in-process-item-root">
          <div class="work-in-process-item" style="flex: 2">
            工序:
            <span class="item-span">{{ state.wipData.opName }}</span>
          </div>
          <div class="line-space"></div>
          <div class="work-in-process-item" style="flex: 3">
            库存数量:
            <span class="item-span">{{ state.wipData.stockQty }}</span>
          </div>
        </div>
        <div class="work-in-process-item-root">
          <div class="work-in-process-item" style="flex: 2">
            人员:
            <span class="item-span">{{ state.wipData.reUserName }}</span>
          </div>
          <div class="line-space"></div>
          <div class="work-in-process-item" style="flex: 3">
            时间:
            <span class="item-span">{{ state.wipData.reTime }}</span>
          </div>
        </div>
      </div>
      <!-- <el-tooltip
        v-if="state.hasToRight"
        content="报检单追溯"
        effect="dark"
        placement="right"
      >
        <div class="work-in-process-right" @click="toRight">
          <el-icon><Right /></el-icon>
        </div>
      </el-tooltip> -->
    </div>
    <el-tooltip
      v-if="state.hasToBottom"
      content="向后追溯"
      effect="dark"
      placement="top"
    >
      <div class="work-in-process-top work-in-process-bottom" @click="toBottom">
        <el-icon><Bottom /></el-icon>
      </div>
    </el-tooltip>
  </div>
</template>
<script setup>
  import { Top, Bottom } from '@element-plus/icons-vue'
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  import {
    getMaterialByReportApi,
    getProductByReportApi,
  } from '@/api/mes/trace_back'
  // import { parseMarks } from '../utils/parse'

  const getNode = inject('getNode')
  const state = reactive({
    node: null,
    wipData: {},
    hasToTop: true,
    hasToRight: true,
    hasToBottom: true,
  })
  const toTop = async () => {
    if (!state.hasToTop) return
    const topData = await getTopData()
    if (!topData || !Object.keys || Object.keys.length === 0) {
      state.hasToTop = false
      state.node.setData({ hasToTop: false })
      return
    }
    state.node && state.node.data && state.node.data.toTop(state.node, topData)
  }
  const getTopData = async () => {
    const res = await getMaterialByReportApi({
      pkReport: state.wipData.pkReport,
    })
    const dataMap = {}
    dataMap['materials'] = res.data
    return (res && res.data && dataMap) || {}
  }
  // const toRight = async () => {
  //   const res = await getJianyanZhuisua({ pkReport: state.wipData.pkReport })
  //   const dataMap = (res && res.data && parseMarks(res.data)) || {}
  //   if (
  //     !dataMap ||
  //     !Object.keys(dataMap) ||
  //     Object.keys(dataMap).length === 0
  //   ) {
  //     state.hasToRight = false
  //     state.node.setData({ hasToRight: false })
  //     return
  //   }
  //   state.node &&
  //     state.node.data &&
  //     state.node.data.toRight(state.node, dataMap)
  // }
  const toBottom = async () => {
    if (!state.hasToBottom) return
    const bottomData = await getBottomData()
    if (
      !bottomData ||
      !Object.keys(bottomData) ||
      Object.keys(bottomData).length === 0
    ) {
      state.hasToBottom = false
      state.node.setData({ hasToTop: false })
      return
    }
    state.node &&
      state.node.data &&
      state.node.data.toBottom(state.node, bottomData)
  }
  const getBottomData = async () => {
    const res = await getProductByReportApi({
      pkReport: state.wipData.pkReport,
    })
    const dataMap = {}
    dataMap['product'] = res.data
    return (res && res.data && dataMap) || {}
  }
  onMounted(() => {
    const node = getNode()
    state.node = node
    state.wipData = node.data.wipData
    state.hasToTop = node.data.hasToTop
    state.hasToBottom = node.data.hasToBottom
    state.hasToRight = node.data.hasToRight
    state.node.on('change:data', ({ current }) => {
      const { hasToTop, hasToBottom, hasToRight } = current
      state.hasToTop = hasToTop
      state.hasToRight = hasToRight
      state.hasToBottom = hasToBottom
    })
  })
</script>
<style lang="scss" scoped>
  .work-in-process-root {
    display: flex;
    flex-direction: column;
    width: 400px;
    height: 220px;
    background-color: #b0e0e6;
    border: 2px solid #e0e0e0;
    border-radius: 5px;
    .work-in-process-top {
      padding: 2px 0;
      font-size: 18px;
      font-weight: bold;
      color: #fff;
      text-align: center;
      cursor: pointer;
      border-bottom: 2px solid #fff;
      &:hover {
        background-color: #afeeee;
      }
    }
    .work-in-process-bottom {
      border-top: 2px solid #fff;
    }

    .work-in-process-right {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 100%;
      font-size: 18px;
      font-weight: bold;
      color: #ffffff;
      cursor: pointer;
      border-left: 2px solid #fff;
      &:hover {
        color: #ffffff;
        background-color: #fbd325;
      }
    }
    .work-in-process-title {
      padding: 3px 0;
      font-size: 16px;
      font-weight: bold;
      line-height: 26px;
      color: #ffffff;
      text-align: center;
      border-bottom: 1px solid #fff;
    }
    .work-in-process-content-root {
      display: flex;
      flex: 1;
      flex-direction: row;
    }
    .work-in-process-content {
      display: flex;
      flex: 1;
      flex-direction: column;
      .work-in-process-item-root {
        display: flex;
        flex: 1;
        flex-direction: row;
      }
      .work-in-process-item {
        display: flex;
        flex: 1;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 0 4px;
        .item-span {
          margin-left: 4px;
          font-weight: bold;
          color: #333;
        }
      }
      .line-space {
        width: 1px;
        height: 10px;
        margin: auto 0;
        background-color: #333;
      }
    }
  }
  .isSelf {
    background-color: #ffba8a;
    &:hover {
      background-color: #ff7300;
    }
  }
</style>
